<template>
  <div class="lobby_item" @click="showItemDetail">
    <img class="logo" :src= "logoPath" />
    <div class="content">
      <div class="title">{{name}}</div>
      <div class="prize_num" >
        <img class="k3num" v-if="type == '1' " v-for="(item, index) in nums" :key="index"
             :src="k3num[item - 1]" />
        <div class="num" v-if="type == '2' " v-for="(item, index) in nums" :key="index"
             :style="getSixNumStype" ></div>
      </div>
      <div class="count_down">距离第{{nper.count}}期截止还有<van-count-down :time= "nper.down" />
      </div>
      <div class="foot">
        <div class="foot_trend">
          <img class="foot_trend_logo" :src="icon.trend">号码走势
        </div>
        <div class="foot_rule">
          <img class="foot_rule_logo" :src="icon.rule">彩票规则
        </div>
        <div class="foot_like">
          <van-icon name="star-o" />收藏
        </div>
        <div class="buy">
          <div class="btn">购买</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import baseData from "../config/BaseData"
    export default {
      name: 'Tabbar',
      props: {
        logo: '', // 图标
        type: '', // 类型， 快3， 急速球， 六合彩
        name: '', // 名称
        nums: { // 每期号码
          type: Array,
          default: []
        },
        nper: {
          // 期数 & 结束时间
        }
      },
      data(){
          return {
            logoPath: this.logo,
            // 色子
            k3num: baseData.k3num,
            store: ['',
                ''],
            // 六合彩
            sixnums: baseData.sixnums,
            icon: {
              'trend' : '',
              'rule': '',
              'store': ['',
                ''],

            }
          }
      },
      methods: {
        getSixNumStype(index) {
          return "background-color: " + this.sixnums[index - 1];
        },
        showItemDetail() {
          if(this.type == '1'){
            this.$router.push({ name: 'quickThreeDetail' })
          }else if(this.type == '2'){
            this.$router.push({ name: 'betBallDetail' })
          }else{

          }

        }
      }
}
</script>
<style lang="less" scoped>
  .lobby_item{
    display: flex;
    margin: 14px;
    border-bottom: 1px solid #efefef;
    -webkit-animation-duration: .25s!important;
    animation-duration: .25s!important;
    position: relative;

    .content{
      flex: 1 1;
    }
  }

  .lobby_item .logo {
    width: 56px;
    height: 56px;
    margin: 0 8px 8px 0;
  }

  .lobby_item .content .title{
    font-size: 14px;
    color: #272727;
    margin-bottom: 6px;
  }

  .lobby_item .content .prize_num{
    font-size: 12px;
    color: #f45300;
    margin-bottom: 6px;

    .k3num{
      margin: 0 4px;
      width: 20px;
      height: 20px;
    }
  }

  .lobby_item .content .count_down{
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color: #989898;
    font-size: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    .van-count-down{
      display: inline-block;
      color: #989898;
    }
  }


  .lobby_item .content .foot{
    flex: 1 1;
    height: 30px;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #272727;
    font-size: 13px;
  }

  .lobby_item .content .foot .foot_trend{
    white-space: nowrap;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 10px;
    font-size: 13px;

    .foot_trend_logo{
      margin: 0;
      margin-right: 4px;
      width: 12px;
      height: 12px;
    }
  }

  .lobby_item .content .foot .foot_rule{
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px;

    .foot_rule_logo{
      margin: 0;
      margin-right: 4px;
      width: 12px;
      height: 12px;
    }
  }

  .lobby_item .content .foot .foot_like{
    position: absolute;
    top: 0;
    right: 0;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
    color: #f45300;
  }

  .lobby_item .content .foot .buy{
    flex: 1 1;
    justify-content: flex-end;
    font-size: 12px;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
  }

  .lobby_item .content .foot .buy .btn{
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 60px;
    height: 24px;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-linear-gradient(0,#ffa660,#ff5a3d);
    color: #fdfdfd;
    border-radius: 100px;
  }
</style>
